<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
let chartInstance = null;

const initChart = () => {
  if (!chartRef.value) return;
  
  chartInstance = echarts.init(chartRef.value);
  
  const option = {
    title: {
      text: '医生工作量统计',
      left: 'center',
      textStyle: {
        fontSize: 14,
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      data: ['门诊量', '手术量', '检查量'],
      bottom: 10
    },
    radar: {
      indicator: [
        { name: '张医生', max: 100 },
        { name: '李医生', max: 100 },
        { name: '王医生', max: 100 },
        { name: '刘医生', max: 100 },
        { name: '陈医生', max: 100 },
        { name: '赵医生', max: 100 }
      ]
    },
    series: [
      {
        name: '医生工作量',
        type: 'radar',
        data: [
          {
            value: [85, 70, 90, 75, 80, 65],
            name: '门诊量',
            areaStyle: {
              color: 'rgba(84, 112, 198, 0.3)'
            },
            lineStyle: {
              color: '#5470c6'
            }
          },
          {
            value: [60, 85, 70, 80, 65, 90],
            name: '手术量',
            areaStyle: {
              color: 'rgba(103, 194, 58, 0.3)'
            },
            lineStyle: {
              color: '#67c23a'
            }
          },
          {
            value: [75, 65, 85, 70, 90, 80],
            name: '检查量',
            areaStyle: {
              color: 'rgba(230, 162, 60, 0.3)'
            },
            lineStyle: {
              color: '#e6a23c'
            }
          }
        ]
      }
    ]
  };

  chartInstance.setOption(option);
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
  window.removeEventListener('resize', handleResize);
});

const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};
</script>